<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
// window.onpopstate = function(event) {}
window.addEventListener('popstate',(event)=>{
  console.log('event:',event)
})

/**  当前页面 -> baidu -> history.back()回当前页 并不会触发popstate*/
</script>

<script>
/** 解决调用pushState不会触发事件的问题*/

/*
onpopstate 该事件是window的属性

该事件会在调用浏览器的前进、后退以及执行history.forward、history.back、和history.go触发
，因为这些操作有一个共性，即修改了历史堆栈的当前指针(history.push虽然会改变url栏显示的地址,但它不会立即访问这个地址(也不会触发 onpopstate 事件),也就是没用上,除非你敲回车(但敲回车就离开当前页了,也就不会触发在该页面监听的onpopstate事件))

当执行back和forward操作时，history栈大小并不会改变（history.length不变），仅仅移动当前指针的位置

另外需要注意 hash改变 也会添加历史记录(并且会触发onpopstate),
浏览器的前进、后退以及执行history.forward、history.back、和history.go 也会触发hashchange事件（如果此次改变的是hash的话）
*/

window.onpopstate = (event) => {
  console.log({ state: event.state, pathname: window.location.pathname, type: event.type });
};
// window.onpushstate = (event) => {
//   console.log(event);
// };


/*
history.pushState(stateObject, title, url)，包括三个参数
第一个参数用于存储该url对应的状态对象，该对象可在onpopstate事件中获取，也可在history对象中获取
第二个参数是标题，目前浏览器并未实现
第三个参数则是设定的url

浏览器针对每个页面(浏览器中的一个tab页)维护一个History栈,执行pushState函数可压入设定的url至栈顶(pushState函数向浏览器的历史堆栈压入一个url为设定值的记录),并改变历史堆栈的当前指针至栈顶(但不会马上访问这资源(也不会触发 onpopstate 事件) 除非你敲回车(但敲回车就离开当前页了,也就不会触发在该页面监听的onpopstate事件))

意思是若当前指针在history栈的中间位置(非栈顶)，此时执行pushState会在指针当前的位置添加此条目,并成为新的栈顶



replaceState 该接口与pushState参数相同，含义也相同
唯一的区别在于replaceState是替换浏览器历史堆栈的当前历史记录为设定的url
需要注意的是replaceState不会改动浏览器历史堆栈的当前指针
*/

// (function (history) {
//   var pushState = history.pushState;
//   history.pushState = function (state, title, pathname) {
//     if (typeof window.onpushstate == "function") {
//       window.onpushstate({ state, pathname, type: 'pushstate' });
//     }
//     return pushState.apply(history, arguments);
//   };
// })(window.history);

</script>
</body>
</html>
